<template>
    <!-- 人员管理下的老人模块中的:编辑对话框 -->
    <el-drawer
        title="老人详情信息:"
        :visible.sync="dialog"
        custom-class="demo-drawer"
        size="50%"
        >
        <div class="demo-drawer__content">

            <el-form :model="form">
                <!-- 头像 -->
                <el-form-item
                    style="margin: 0; display: flex;justify-content: center;"
                >
                    <img :src="form.photo_url" alt="头像"
                    style="height: 140px;width: 140px;border-radius: 50%;margin-top: 0;"
                    >
                </el-form-item>
                <!-- 用户名、性别、年龄、联系电话 -->
                <el-form-item>
                    <span style="margin-right: 15px;">用户名:</span>
                    <el-input v-model="form.username" style="width: 25%;"></el-input>

                    <span style="margin-left: 15px; margin-right: 15px;">性别:</span>
                    <el-input v-model="form.sex" style="width: 10%;" :disabled="true"></el-input>

                    <span style="margin-left: 15px; margin-right: 15px;">年龄:</span>
                    <el-input v-model="form.age" style="width: 10%;"></el-input>

                    <span style="margin-left: 15px; margin-right: 15px;">联系电话:</span>
                    <el-input v-model="form.phone" style="width: 20%;"></el-input>
                </el-form-item>

                <!-- 近期登录时间、地址、身份 -->
                <el-form-item>
                    <span style="margin-right: 15px;">近期登录时间:</span>
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.last_login_time" style="width: 20%;" :disabled="true"></el-date-picker>

                    <span style="margin-left: 15px; margin-right: 15px;">地址:</span>
                    <el-input v-model="form.address" style="width: 38%;"></el-input>

                    <span style="margin-left: 15px; margin-right: 15px;">身份:</span>
                    <el-input v-model="form.status" style="width: 13%;" :disabled="true"></el-input>
                </el-form-item>

                <!-- 负责员工、亲属、亲属电话 -->
                <el-form-item>
                    <span style="margin-right: 15px;">负责员工:</span>
                    <el-select v-model="form.employee_id" placeholder="请选择变更的员工" style="width: 30%;">
                        <el-option :label="item.username" :value="item.id" v-for="item in employeeList" :key="item.id"></el-option>
                    </el-select>

                    <span style="margin-left: 15px; margin-right: 15px;">亲属:</span>
                    <el-input v-model="form.clan" style="width: 20%;"></el-input>

                    <span style="margin-left: 15px; margin-right: 15px;">亲属电话:</span>
                    <el-input v-model="form.clan_phone" style="width: 20%;"></el-input>
                </el-form-item>

                <!-- 身份编号(ID) -->
                <el-form-item>
                    <span style="margin-right: 15px;">身份编号:</span>
                    <el-input v-model="form.id_card" style="width: 25%;"></el-input>
                </el-form-item>

                <el-divider></el-divider>

                <!-- 账号建档时间、近期修改时间 -->
                <el-form-item>
                    <span style="margin-left: 15px; margin-right: 15px;">账号建档时间:</span>
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.create_time" style="width: 18%;" :disabled="true"></el-date-picker>
                    
                    <span style="margin-left: 15px; margin-right: 15px;">近期修改时间:</span>
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.update_time" style="width: 18%;" :disabled="true"></el-date-picker>
                </el-form-item>

                <!-- 其他信息 -->
                <el-form-item label="其他信息:">
                    <el-input type="textarea" v-model="form.other_info"></el-input>
                </el-form-item>

            </el-form>

            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="closeDrawer" :loading="loading">{{loading===false?'更新':'提交中...'}}</el-button>
            </div>
        </div>
    </el-drawer>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    import Qs from 'qs';
    export default {
        name:'OlderEditDialogBox',
        data() {
            return {
                // 控制抽屉的展示
                dialog: false,
                // 控制确认按钮动画
                loading:false,
                // 当前老人的详细信息
                form:{},
                // 存放所有的员工信息
                employeeList:[]
            }
        },
        watch:{
            form(){
                this.dialog = true;
            }
        },
        methods:{
            // 取消按钮
            cancelForm() {
                // 关闭动画
                this.loading = false;
                // 隐藏抽屉
                this.dialog = false;
            },
            // 更新按钮
            closeDrawer(){
                // 打开button动画
                this.loading = true;
                myAxios(
                    'http://localhost:8088/older/updateolderinfoinadmin',
                    'post',
                    Qs.stringify(this.form),
                    (data)=>{
                        // 关闭button动画
                        this.loading = false;
                        // window.location.reload();
                        // 提示一下
                        this.$message({
                            message: '更新老人信息成功!',
                            type: 'success'
                        });
                        // 关闭抽屉
                        this.cancelForm();
                        window.location.reload();
                    }
                )
            },
            // 点击打开抽屉的事件回调
            clickAppearDrawer(data){
                this.form = data;
            }
        },
        mounted(){
            // 绑定自定义事件
            this.$bus.$on('clickAppearDrawer',this.clickAppearDrawer);
            // 获取所有的员工信息
            myAxios(
                'http://localhost:8088/employee/getallemployeelist',
                'get',
                null,
                (data)=>{
                    this.employeeList = data;
                }
            )
        },
        beforeDestroy(){
            // 解绑
            this.$bus.$off('clickAppearDrawer');
        }
    }
</script>

<style lang="less">
.demo-drawer{
    padding: 15px;
}
</style>